<script setup>
import FirstTitle from "@comp/FirstTitle";
const city = window.globalObj.name;

import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataKqzy } from "@/api/search";
import { addOrUpdateKqzy } from "@/api/addOrUpdate";

const html = ref(
  `由指挥控制中心的协同救援组，情报信息部的综合情报组、通信警报组，综合保障部的组织计划组、交通运输保障组、物资保障组，统一组织指挥协调跨区支援的任务对接、指挥交接和行动协调。`
);

const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const toolbarConfig = {};
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const editorConfig = {
  placeholder: "请输入内容...",
};
const editorConfig1 = {
  placeholder: "请输入内容...",
};
const editorConfig2 = {
  placeholder: "请输入内容...",
};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");

// 加载html
const initHtml = () => {
  searchDataKqzy({ m: "指挥协同-指挥主体" }).then((res) => {
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "指挥控制中心")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "情报信息部")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "综合保障部")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};
const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

const valueHtml = ref(
  "（1）协同救援组<br/>主要职责：<br/>①拟制跨区域协同救援方案和保障计划；<br/>②组织跨区域协同救援行动；<br/>③跨市级行动区域需协同保障救援时，向上级请示并组织相关行动。"
);
const valueHtml1 = ref(
  "（1）综合情报组<br/>主要职责：<br/>①配合被支援单位指挥、协调、组织侦察行动，尤其是观察哨观测报告；<br/>②情报处理，配合被支援单位拟制侦察计划、命令，接收处理敌情态势情报信息；<br/>③情报整编，配合被支援单位融合各阶段、各时节敌情态势，整编敌情态势图；<br/>④情报分发，配合被支援单位筛选搜集的情报信息并按需分发。<br/>（2）通信警报组<br/>主要职责：<br/>①拟制跨区支援通信保障方案；<br/>②加入被支援单位空情报知网，组织警报管理、发放；<br/>③组织通信、警报设施和有关器材保障。"
);
const valueHtml2 = ref(
  "（1）组织计划组<br/>主要职责：<br/>①拟制行动协同保障计划。<br/>（2）交通运输保障组<br/>主要职责：<br/>①制定跨区支援交通运输和油料保障计划；<br/>②及时掌握跨区支援交通运输和油料筹措供应情况，提出跨区支援交通运输和油料保障行动决心建议。<br/>（3）物资保障组<br/>主要职责：<br/>①制定跨区支援物资保障计划；<br/>②组织协调跨区支援物资保障行动；<br/>③提出跨区支援装备器材保障报告和建议；<br/>④拟制跨区支援装备器材保障计划，下达保障指示。"
);

const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateKqzy({
      m: "指挥协同-指挥主体",
      data: [
        {
          k: "指挥控制中心",
          v: valueHtml.value,
        },
        {
          k: "情报信息部",
          v: valueHtml1.value,
        },
        {
          k: "综合保障部",
          v: valueHtml2.value,
        },
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});
onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
});
</script>
<template>
  <div>
    <div class="box text-page">{{ html }}</div>

    <FirstTitle name="指挥控制中心" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="情报信息部" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig1"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="综合保障部" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig2"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss"></style>
